<template>
  <!-- 我的资源内容 -->
  <div>
    <div>
      <div class="search">
        <el-input
          v-model="query.appNub"
          size="small"
          clearable
          placeholder="输入申请编号"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleSearch"
        />
        <!--        <el-select-->
        <!--          v-model="query.appDept"-->
        <!--          size="small"-->
        <!--          clearable-->
        <!--          placeholder="输入申请单位"-->
        <!--          style="width: 200px;"-->
        <!--          class="filter-item"-->
        <!--        >-->
        <!--          <el-option-->
        <!--            v-for="item in appDeptOptions"-->
        <!--            :key="item.id"-->
        <!--            :label="item.label"-->
        <!--            :value="item.value"-->
        <!--          />-->

        <!--        </el-select>-->
        <!--        <el-input-->
        <!--          v-model="query.appName"-->
        <!--          size="small"-->
        <!--          clearable-->
        <!--          placeholder="选择申请人"-->
        <!--          style="width: 200px;"-->
        <!--          class="filter-item"-->
        <!--        />-->
        <el-select
          v-model="query.appStu"
          size="small"
          clearable
          placeholder="选择申请状态"
          style="width: 200px;"
          class="filter-item"
        >
          <el-option label="待审批" value="0" />
          <el-option label="数据局审批通过" value="1" />
          <el-option label="审批通过" value="2" />
          <el-option label="审批拒绝" value="3" />
          <el-option label="已撤销" value="4" />
        </el-select>
        <el-select
          v-model="query.isMr"
          size="small"
          clearable
          placeholder="是否挂载资源"
          style="width: 200px;"
          class="filter-item"
        >
          <el-option label="是" value="0" />
          <el-option label="否" value="1" />
        </el-select>
        <el-date-picker
          v-model="timeValue"
          class="filter-item"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          style="margin-top: 10px"
        />
        <el-button size="mini" type="primary" @click="handleSearch()">查 询</el-button>
        <el-button
          size="small"
          class="filter-item"
          @click="resetSearch"
        >
          重置
        </el-button>
      </div>
      <el-table
        highlight-current-row
        style="width: 100%;margin-top: 20px"
        :data="dataList"
        border
      >
        <!-- 所有字段均已添加到表格中 -->
        <el-table-column prop="appNub" label="申请编号" width="140" />
        <el-table-column prop="catalogName" label="编目名称" width="180" />
        <el-table-column label="资源类型" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.appMethod === '0'">API</span>
            <span v-if="scope.row.appMethod === '1'">数据库</span>
            <span v-if="scope.row.appMethod === '2'">文件</span>
          </template>
        </el-table-column>
        <el-table-column prop="appDept" label="申请单位" width="140" />
        <el-table-column prop="appName" label="申请人姓名" width="120" />
        <el-table-column prop="appPhone" label="申请人电话" width="130" />
        <el-table-column prop="appEmail" label="申请人邮箱" width="180" />
        <el-table-column prop="createTime" label="申请时间" width="180" />
        <el-table-column prop="appScenarios" label="应用场景" width="160" show-overflow-tooltip />
        <el-table-column prop="appMatters" label="应用事项" width="140" show-overflow-tooltip />
        <el-table-column prop="appBasis" label="申请依据" width="140" show-overflow-tooltip />
        <el-table-column label="申请状态" width="140">
          <template slot-scope="scope">
            <el-tag
              :type="getStatusType(scope.row.appStu)"
            >
              {{ getStatusText(scope.row.appStu) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="140" show-overflow-tooltip />
        <el-table-column label="是否超期" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.isOverdue === 0" class="text-success">是</span>
            <span v-if="scope.row.isOverdue === 1" class="text-danger">否</span>
          </template>
        </el-table-column>
        <el-table-column label="是否挂载资源" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.isMr === 0" class="text-success">是</span>
            <span v-if="scope.row.isMr === 1" class="text-danger">否</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120px"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-view"
              @click="openDetailDialog(scope.row)"
            >查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total-num="totalNum" :current-page="currentPage" @handleCurrentChange="handleCurrentChange" />
      <ZybmInfoDialog ref="detailsDialog" />
    </div>
  </div>
</template>
<script>
import { getQuerySharingAppByGr, geQquerySharingAppByGrDtail } from '@/api/xwZx'
import Pagination from '@/components/common/Pagination.vue'
import ZybmInfoDialog from '@/views/dataResourceMounting/ZybmInfoDialog.vue'
import { getDataTypeGetallDept } from '@/api/resource/application'
export default {
  components: { ZybmInfoDialog, Pagination },
  data() {
    return {
      timeValue: [],
      appDeptOptions: [],
      statusMap: {
        '0': '待审批',
        '1': '数据局审批通过',
        '2': '审批通过',
        '3': '审批拒绝',
        '4': '已撤销'
      },
      query: {
        appNub: '',
        appDept: '',
        appApplicant: '',
        appName: '',
        catalogName: '',
        appStu: '',
        isMr: ''
      },
      zylxOptions: [
        {
          value: '0',
          label: 'API'
        },
        {
          value: '1',
          label: '数据库'
        },
        {
          value: '2',
          label: '文件'
        }
      ],
      gxOptions: [
        {
          value: '0',
          label: '无条件共享'
        },
        {
          value: '1',
          label: '有条件共享'
        },
        {
          value: '2',
          label: '不予共享'
        }
      ],
      dataList: [],
      totalNum: 0,
      currentPage: 1,
      isShow: true,
      statusTypeMap: {
        '0': 'warning', // 待审批-警告色
        '1': 'info', // 数据局审批通过-信息色
        '2': 'success', // 审批通过-成功色
        '3': 'danger', // 审批拒绝-危险色
        '4': 'gray' // 已撤销-灰色
      }
    }
  },
  created() {
    this.loadTableData()
    getDataTypeGetallDept().then(res => {
      console.log('下拉框', res)

      this.appDeptOptions = res.map(item => {
        return {
          label: item.name,
          value: item.id
        }
      })
    })
  },
  methods: {
    resetSearch() {
      this.query = {
        appNub: '',
        appDept: '',
        appApplicant: '',
        appName: '',
        catalogName: '',
        appStu: '',
        isMr: ''
      }
      this.timeValue = null

      this.handleSearch()
    },

    handleSearch() {
      this.currentPage = 1
      this.loadTableData()
    },

    // 打开详情弹窗
    openDetailDialog(row) {
      geQquerySharingAppByGrDtail({ appNub: row.appNub }).then(res => {
        console.log(res.catalogInfoVo, '编目详情')
        console.log(res.sharingApp, '申请详情')
        console.log(res.dataResources, '资源挂载12312')
        this.$refs.detailsDialog.setDetailData(JSON.parse(res.catalogInfoVo))
        this.$refs.detailsDialog.setSharingAppData(
          JSON.parse(res.sharingApp),
          JSON.parse(res.dataResources || '{}') // 传递资源数据
        )
      })
    },
    // 获取状态样式
    getStatusType(status) {
      return this.statusTypeMap[status] || 'default'
    },
    // 获取状态文本
    getStatusText(status) {
      return this.statusMap[status] || '未知状态'
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadTableData()
    },
    // 我的申请｜数据资源
    loadTableData() {
      getQuerySharingAppByGr({
        page: this.currentPage,
        size: 10,
        appNub: this.query.appNub || null,
        catalogName: this.query.catalogName || null,
        appDept: this.query.appDept || null,
        appApplicant: this.query.appApplicant || null,
        appName: this.query.appName || null,
        appStu: this.query.appStu || null,
        isMr: this.query.isMr || null,
        startTime: this.timeValue ? this.timeValue[0] : null,
        endTime: this.timeValue ? this.timeValue[1] : null
      }).then((res) => {
        console.log(res, '我的申请，数据资源123')
        this.dataList = res.content
        this.totalNum = res.totalElements
      })
    }
  }
}
</script>
<style scoped>
</style>
